import React, { memo, useEffect } from 'react'
import MenuBarItem from '../menuBarItem/MenuBarItem'
import Classify from '../classify/Classify'
import Scroll from '../../../baseUI/scroll'
import './MenuBar.css'

function MenuBar(props) {
    const {menuBarData,classifyData} = props
    return (
        <div className='menubar'>
            <Scroll 
                    direction="horizental"
                    refresh={false}
                >
                <div className='scroll_box'>
                    <Classify classifyData={classifyData} />
                    <div className='menuBar_container'>
                        {menuBarData.map((item,index)=><MenuBarItem menuBarItemData={item} key={index+'menu'} />)}
                    </div>
                </div>
            </Scroll>
        </div>
        
    )
}



export default memo(MenuBar)